<template>
  <div>
    <tabbar v-model="tabbarIndex" style="position: fixed">
      <tabbar-item @on-item-click="gotoTabbarPage(0)">
        <img slot="icon" src="../../assets/images/tabbar/homepage.png">
        <img slot="icon-active" src="../../assets/images/tabbar/homepage_fill.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(1)">
        <img slot="icon" src="../../assets/images/tabbar/dynamic.png">
        <img slot="icon-active" src="../../assets/images/tabbar/dynamic_fill.png">
        <span slot="label">监控</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(2)" badge="待">
        <img slot="icon" src="../../assets/images/tabbar/remind.png">
        <img slot="icon-active" src="../../assets/images/tabbar/remind_fill.png">
        <span slot="label">告警</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(3)">
        <img slot="icon" src="../../assets/images/tabbar/people.png">
        <img slot="icon-active" src="../../assets/images/tabbar/people_fill.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, AlertModule, TabbarItem, Group, Cell, TransferDomDirective as TransferDom } from 'vux'

  export default {
    name: 'MyTabbar',
    directives: {
      TransferDom
    },
    components: {
      Tabbar,
      TabbarItem,
      Group,
      Cell
    },
    data () {
      return {
        // 从state中获取全局tabbarIndex
        tabbarIndex: this.$store.state.tabbarIndex,
        show: false
      }
    },
    methods: {
      gotoTabbarPage (tabbarIndex) {
        if (tabbarIndex === 2) {
          AlertModule.show({
            title: '敬请期待',
            content: '敬请期待',
            onShow () {
              console.log('Module: I\'m showing')
            },
            onHide () {
              console.log('Module: I\'m hiding now')
            }
          })
        } else {
          // 由于这里需要更改全局tabbarIndex,所以必须通过mutations方式去跳转
          // 更新底部菜单index
          this.$store.dispatch('updateTabbarIndex', {tabbarIndex: tabbarIndex})
        }
      }
    },
    watch: {
      tabbarIndex: function (val, oldVal) {
        // 这里就可以通过 val 的值变更来确定
        console.log(val)
      }
    }
  }
</script>
